<template>
	<view>
		<uni-head title="报案上传"></uni-head>
		<view style="background-color: #fff;">
			<view class="cliao">
				<view class="titlesm flex">
					<view class="blueshu"></view>
					<view class="shuoming">理赔说明</view>
				</view>
			</view>
			
			<!-- 图片上传 -->
			<view class="relevant">
				<view class="titletext">理赔图片</view>
					<scroll-view :scroll-x="true" class="scroll flex"  style="width: 100%">
					  <view class="shangchuan flex"  v-for="(item, index) in aggregateobj.material_img" :key="index">
					    <image :src="item" mode="" />
					    <image v-show="ismodify" @click="deleteimg(index)" src="../../static/Icon/shan.png" mode="" />
					  </view>
					  <view class="uppop scroll" @tap="upLoad" v-show="ismodify">
					  	<image src="../../static/Icon/shangchuan.png" mode=""></image>
					  </view>
					</scroll-view>
			</view>
		
			<!-- 文件上传 -->
			<view class="upfile">
				<view class="filetitle flex-space-between">
					<view class="left">文件</view>
					<view class="right flex" v-show="ismodify">
						<view class="imgbox">
							<image src="../../static/Icon/shangchaun.png" mode=""></image>
						</view>
						<view class="uptext" @click="uplaosfile">上传文件</view>
					</view>
				</view>
				<view class="fileList flex-space-between" v-for="(item,index) in aggregateobj.material_file" :key="index">
					<view class="left flex">
						<view class="imgbox">
							<image src="../../static/Icon/bianqian.png" mode=""></image>
						</view>
						<view class="listname">{{item.name}}</view>
					</view>
					<view class="right" v-show="ismodify" @click="deletefile(index)">删除</view>
				</view>
			</view>
		</view>
		<view style="height: 100upx;">
			
		</view>
		<view class="butbox flex">
			<view class="left"  @click="qxclick">取消</view>
			<view class="right" v-show="ismodify" @click="upclick">确认上传材料</view>
			<view class="right" v-show="!ismodify" @click="ismodify=!ismodify">修改</view>
		</view>
		<!-- 取消返回上一页 -->
		<unipopup ref="qxpopup" type="center" background-color="#fff">
			<view class="backbox">
				<view class="topbox">是否返回上一页</view>
				<view class="buttombox flex-space-between">
					<view class="leftbox" @click="popquxiao">取消</view>
					<view class="rightbox" @click="quqdclick">确定</view>
				</view>
			</view>
		</unipopup>
	
	</view>
</template>

<script>
	import uniHead from "@/components/uni-dead/head.vue";
	import {chooseImage,IDcard,showToast,navTo,chooseMessageFile} from '@/utils/method.js'
	import {
	  pathToBase64,
	  base64ToPath,
	} from "@/static/js_sdk/gsq-image-tools/image-tools";
	import unipopup from '../../components/uni-popup/uni-popup.vue'
	// import examine from './components/examine/examine'
	export default {
			components: { uniHead, unipopup},
		data() {
			return {
				
				aggregateobj:{
					id:'',
					material_img:[],//照片数组
					material_file:[],//文件数组
				},
				id:'',
				ismodify:true,//提交还是修改
				navinfo:{
					url:'../../static/Icon/cg.png',
					title:'成功',
					contr:'您的理赔申请已完成，请耐心等待平台审核，邮寄理赔材料',
					butname:'我的理赔'
				}
			}
		},
		onLoad(obj) {			
			this.id=JSON.parse(obj.obj).id
			// 如果没有传show是正常上传状态，传了show就是修改状态
			if(JSON.parse(obj.obj).show==null){
				this.ismodify=true
			}else{
				this.ismodify=false
				this.reportgetDetail()
			}
		},
		methods: {
			//删除上传图片
			 deleteimg(index){
				 this.aggregateobj.material_img.splice(index,1)
			 },
			upLoad(e, index) {
				   uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera "], //从相册选择
					success: (res) => {
						console.log(res);
					  var pic = res.tempFilePaths[0];
					  pathToBase64(res.tempFilePaths[0])
						.then((base64) => {
						  // 获取图片信息
						  let timestamp = new Date().getTime();
						  this.oss_upload({ tempFilePaths: [pic] }, timestamp, {
							success: (res) => {
							  var src =
								"https://djb.oss-cn-shanghai.aliyuncs.com/" + timestamp;
								console.log(src);
								this.aggregateobj.material_img.push(src)
								// console.log(this.Submitdata.scene_img);
							},
							fail: (ress) => {
							  this.toast("图片上传失败");
							},
						  });
						})
						.catch((error) => {
						  this.toast("图片解析失败");
						});
					},
				   });
			},
			uplaosfile(){
				chooseMessageFile().then(res=>{
					let fileobj={
						name:res[0].name,
						url:res[0].path
					}
					// console.log('列表',res);
					uni.uploadFile({
								url: '/phone/report/updateReportFile', //仅为示例，非真实的接口地址
								// filePath: res[0].path,
								name: 'file',
								files:res,
								formData: {
									id:this.id,
									file:res[0]
								},
								success: (uploadFileRes) => {
									console.log(JSON.parse(uploadFileRes.data));
									this.aggregateobj.material_file.push({
										name:JSON.parse(uploadFileRes.data).msg.name,
										url:JSON.parse(uploadFileRes.data).msg.url
									})
								},
								fail:(r)=>{
									console.log(JSON.parse(r));
								}
					});
				})
			},
			
			deletefile(index){
				this.aggregateobj.material_file.splice(index,1)
			},
			reportgetDetail(){
				this.ajax('report/getDetail',{
					data:{
						id:this.id
					},
					success:(res)=>{
						this.aggregateobj.material_img=res.msg.info.material_img
						this.aggregateobj.material_file=res.msg.info.material_file
						console.log(res);
					}
				})
			},
			// 打开取消弹框
			qxclick(){
				this.$refs.qxpopup.open('top')
				
			},
			// 关闭弹框
			popquxiao(){
				this.$refs.qxpopup.close()
			},
			// 返回
			quqdclick(){
				this.$refs.qxpopup.close()
				uni.navigateBack()
			},
			 // 上传资料
			 upclick(){
				this.aggregateobj.id= this.id
				 this.ajax('report/uploadMaterial',{
					 data:this.aggregateobj,
					 success:(res)=>{
						 if(res.code==1){
							 navTo('/components/examine/examine?id='+this.id)
						 }else{
							 showToast(res.msg)
						 }
						 console.log(res);
					 }
				 })
				 // navTo('/components/examine/examine')
			}
		}
	}
</script>
<style>
	page{
		background-color: #F9F9F9;
	}
</style>
<style lang="less" scoped>
	
	.backbox{
		background-color: #fff;
		width: 600upx;
		height: 300upx;
		.topbox{
			width: 600upx;
			padding-top: 80upx;
			text-align: center;
		}
		.buttombox{
			margin-top: 80upx;
			.leftbox,.rightbox{
			   	width: 300upx;
				height: 100upx;
				text-align: center;
				font-size: 32upx;
				line-height: 100upx;
			}
			.leftbox{
				background-color: #fff;
			}
			.rightbox{
				color: #fff;
				background: linear-gradient(180deg, #4EB4FE 0%, #5280F8 100%)
			}
		}
	}
	
.cliao{
	margin: 10upx 24upx 0;
	padding-bottom: 38upx;
	border-bottom: 1px solid #EEEEEE;
		.titlesm{
			padding-top: 28upx;
			font-size: 28upx;
			
			.blueshu{
				width: 6upx;
				height: 20upx;
				background: #5081FA;
				border-radius: 4upx;
				margin-right: 10upx;
			}
		}
}
.relevant{
	margin: 0upx 24upx;
	.titletext{
		padding: 20upx 0;
		color: #000000;
		font-size: 28upx;
	}
	 .shangchuan {
      display: inline-block;
      width: 160rpx;
      height: 160rpx;
      margin-right: 18rpx;
      border-radius: 10rpx;
      position: relative;
      image:nth-child(1) {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
      }
      image:nth-child(2) {
        position: absolute;
        top: 4rpx;
        right: 4rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
	.uppop{
		width: 156upx;
		height: 156upx;
		border: 1px solid #DDDDDD;
		display: inline-block;
		border-radius: 10upx;
		position: relative;
		image{
			width: 36upx;
			height: 32upx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
	}
}
.upfile{
	margin: 26upx 24upx 0;
	padding: 20upx 0;
	border-bottom: 1px solid #EEEEEE;
	.filetitle{
		.left{
			font-size: 28upx;
			color: #000000;
		}
		.right{
			.imgbox{
				width: 40upx;
				height: 30upx;
				margin-bottom: 8upx;
				image{
					width: 40upx;
					height: 30upx;
				}
			}
			.uptext{
				color: #5280F8;
				margin-left: 6upx;
				font-size: 28upx;
			}
		}
	}
	.fileList:last-child{
		margin-bottom: 40upx;
	}
	.fileList{
		margin-top: 24upx;
		height: 88upx;
		border-radius: 10upx;
		background-color: #FCFCFC;
		.left{
			.imgbox{
				width: 33upx;
				height: 36upx;
				margin: 0 14upx 0 28upx;
				image{
					width: 33upx;
					height: 36upx;
				}
			}
			.listname{
				font-size: 28upx;
				color: #000000;
			}
		}
		.right{
			color: #F86768;
			font-size: 28upx;
			margin-right: 22upx;
		}
	}
}
.butbox{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100upx;
	.left,.right{
		text-align: center;
		line-height: 100upx;
		font-size: 32upx;
		
	}
	.left{
		width: 298upx;
		background-color: #fff;
		color: #333333;
	}
	.right{
		width: 452upx;
		color: #fff;
		background: linear-gradient(180deg, #4EB4FE 0%, #5280F8 100%);
	}
}
</style>
